<template>
  <div id="app">
    <van-nav-bar title="用户咨询" />
    <div class="messages" ref="message">
      <div v-for="(item, i) in dataInfo" :key="i" class="w">
        <div v-if="item.isUser" class="u">
          <div class="chart-item">
            <div style="font-size: 0.8em; padding-left: 10px">
              {{ item.uid }}
            </div>
            <div class="user-message">{{ item.info }}</div>
          </div>
        </div>
        <div v-if="!item.isUser" class="a">
          <div class="chart-item">
            <div
              style="font-size: 0.8em; text-align: right; padding-right: 10px"
            >
              {{ item.aid }}
            </div>
            <div class="user-message">{{ item.info }}</div>
          </div>
        </div>
      </div>
    </div>
    <van-field v-model="info" @keyup.enter="send" center clearable>
      <template #button>
        <van-button size="small" type="primary" @click="send">发送</van-button>
      </template>
    </van-field>
  </div>
</template>

<script>
import io from "../../node_modules/socket.io/client-dist/socket.io";
export default {
  name: "App",
  data() {
    return {
      info: "",
      dataInfo: [],
      socket: null,
    };
  },
  mounted() {
    this.socket = io("http://127.0.0.1:9999");
    this.socket.on("connect", () => {
      this.socket.on("userInfoServer", (infoObj) => {
        this.dataInfo.push(infoObj);
      });
      this.socket.on("reload", () => {
        window.location.reload();
      });
    });
  },
  methods: {
    send() {
      let infoObj = {
        info: this.info,
        isUser: false,
        aid: "客服-小爱",
      };
      // 去除文本框前后空格
      let val = this.info.trim();
      if (val.length > 0) {
        this.socket.emit("adminInfo", infoObj);
        this.dataInfo.push(infoObj);

        // 将滚动条拉倒最底部
        this.$nextTick(() => {
          this.$refs.message.scrollTop = this.$refs.message.scrollHeight;
        });
        this.info = "";
      }
    },
  },
};
</script>

<style>
.van-nav-bar__content {
  background-color: #36c14c;
  height: 7vh !important;
}
.van-icon-arrow-left:before {
  color: #fff;
}
.van-nav-bar__text {
  color: #fff !important;
}
.van-nav-bar__title {
  color: #fff !important;
}
.messages {
  border-bottom: 1px solid skyblue;
  width: 100%;
  height: 85vh;
  overflow: auto;
  background-color: #f5f5f5;
}
.u {
  display: flex;
  justify-content: flex-start;
}
.chart-item::after,
.chart-item::before {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.chart-item {
  margin-bottom: 10px;
}
.chart-item .user-message {
  position: relative;
  float: left;
  padding: 10px;
  max-width: 55vw;
  background: skyblue;
  font-size: 14px;
  border-radius: 3px;
}
.u .chart-item .user-message {
  margin-left: 10px;
}
.a .chart-item .user-message {
  background-color: #95ec69;
  margin-right: 10px;
}
.chart-item .user-message::before {
  content: " ";
  position: absolute;
  width: 10px;
  height: 10px;
  background: skyblue;
  top: 10px;
  z-index: 222;
  transform: rotate(45deg);
}
.u .chart-item .user-message::before {
  left: -5px;
}
.a .chart-item .user-message::before {
  background-color: #95ec69;
  right: -5px;
}
.a {
  display: flex;
  justify-content: flex-end;
}
</style>
